<template>
	<div class="wrapper">
		
		<div class="user" @click="toPersonalData">
			<img src="../assets/yh.webp">
			<div class="user-name">
				{{user.userName}}
			</div>
		</div>
		
		<div class="money" @click="toWallet">
			<div class="money-left">
				<img src="../assets/qb.webp">
				<p>我的钱包</p>
			</div>
			<div class="money-right" >
				<p>余额：</p>
				<div class="balance" >{{updateuser.walletBalance}}</div>
				
			</div>
		</div>
		
		<div class="score" @click="toIntegral">
			<div class="score-left">
				<img src="../assets/jf.webp">
				<p>我的积分</p>
			</div>
			<div class="score-right">
				<p>积分：</p>
				<div class="score-total">{{totalcredit}}</div>
			</div>
		</div>
		
		
		
		<!-- 底部菜单部分 -->
		<ul class="footer">
			<li @click="toIndex">
				<i class="fa fa-home"></i>
				<p>首页</p>
			</li>
			<li>
				<i class="fa fa-compass"></i>
				<p>发现</p>
			</li>
			<li @click="toOrderList">
				<i class="fa fa-file-text-o"></i>
				<p>订单</p>
			</li>
			<li @click="toMy">
				<i class="fa fa-user-o"></i>
				<p>我的</p>
			</li>
		</ul>
	</div>
</template>

<script>
	
	export default {
		name: 'my',
		data() {
			return {
				updateuser:{},
				user: {},
				userwallet:{},
				userwalletArr:[],
				
				creditArr:[],
			}
		},
		created(){
			this.user = this.$getSessionStorage('user');
			this.$axios.post('UserController/getUserByUserId',this.$qs.stringify({
				userId:this.user.userId,
			})).then(response=>{
				this.updateuser=response.data;
			}).catch(error => {
				console.error(error);
			});
			
			
			this.$axios.post('CreditController/listByUserId',this.$qs.stringify({
				userId:this.user.userId,
			})).then(response=>{
				this.creditArr=response.data;
			}).catch(error => {
				console.error(error);
			});
			
			
		},
		computed: {//计算属性
		    totalcredit() {
		        let totalcredit = 0;
		        for (let item of this.creditArr) {
		            if(item.type==1){
						totalcredit+=item.credit;
					}else{
						totalcredit-=item.credit;
					}
		        }
				
		        return totalcredit;
		    }
		},
		methods: {
			
			
			
			toIndex() {
				this.$router.push({
					path: '/index'
				});
			},
			toOrderList() {
				this.$router.push({
					path: '/orderList'
				});
			},
			toMy() {
				this.$router.push({
					path: '/my'
				});
			},
			toPersonalData() {
				this.$router.push({
					path: '/personalData'
				});
			},
			toWallet() {
						this.$router.push({path: '/wallet'});
			},
			toIntegral() {
				this.$axios.post('UserController/addCreditById',this.$qs.stringify({
					userId:this.user.userId,
					totalCredit:this.totalcredit,
				})).then(response=>{
					
				}).catch(error => {
					console.error(error);
				});
						this.$router.push({path: '/integral'});
			},
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: azure;
	}
	/****************** 用户 ******************/
	.wrapper .user {
		width: 100%;
		height: 12vw;
		background-color: #FFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 1vw;
	}
	.wrapper .user img {
		width: 10vw;
		height: 10vw;
	}
	.wrapper .user .user-name {
		font-size: 5vw;
		color: #000;
	}
	
	/****************** 钱包 ******************/
	.wrapper .money {
		width: 100%;
		height: 14vw;
		background-color: #FFF;
		display: flex;
		margin-bottom: 1vw;
		

	}
	.wrapper .money .money-left {
		width: 20%;
		height: 14vw;
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: solid 1px #DDD;
	}
	.wrapper .money .money-left img {
		width: 10vw;
		height: 10vw;
	}
	.wrapper .money .money-left p {
		font-size: 4vw;
		color: #000;
	}
	.wrapper .money .money-right {
		width: 50%;
		height: 14vw;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.wrapper .money .money-right p {
		font-size: 4vw;
		color: #000;
	}
	.wrapper .money .money-right .balance {
		font-size: 4vw;
		color: #000;
	}
	
	/****************** 积分 ******************/
	.wrapper .score {
		width: 100%;
		height: 14vw;
		background-color: #FFF;
		display: flex;
		margin-bottom: 1vw;
		
	
	}
	.wrapper .score .score-left {
		width: 20%;
		height: 14vw;
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: solid 1px #DDD;
	}
	.wrapper .score .score-left img {
		width: 10vw;
		height: 10vw;
	}
	.wrapper .score .score-left p {
		font-size: 4vw;
		color: #000;
	}
	.wrapper .score .score-right {
		width: 20%;
		height: 14vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.wrapper .score .score-right p {
		font-size: 4vw;
		color: #000;
	}
	.wrapper .score .score-right .score-total {
		font-size: 4vw;
		color: #000;
	}
	
	/****************** footer ******************/
	.wrapper .footer {
		width: 100%;
		height: 14vw;
		border-top: solid 1px #DDD;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.wrapper .footer li {
		/*li本身的尺寸完全由内容撑起*/
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #999;
		user-select: none;
		cursor: pointer;
	}
	
	.wrapper .footer li p {
		font-size: 2.8vw;
	}
	
	.wrapper .footer li i {
		font-size: 5vw;
	}
	
	
	
</style>
